<template>
  <view class="homeMain">
    <!-- #ifdef H5-->
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <!-- #endif -->
    <u-sticky>
      <view class="searchBox">
        <u-search placeholder="请输入关键字进行检索" v-model="keyword"></u-search>
      </view>
    </u-sticky>
    <view class="listMain">
      <view
          class="listItem"
          v-for="(item, index) in list"
          :key="index"
          @click="$u.route('/pages/detail/index')"
      >
        <view class="titleH3">
          <text class="h3" :style="{width: index === 3 || index === 2 ? 'calc(100% - 100px)' : '100%'}">2025年智能变电站值班员专项培训班(一期)</text>
          <u-tag class="uTag" v-if='index === 3' text="已报名" mode="plain" type="success" />
          <u-tag class="uTag" v-if='index === 2' text="已开课" mode="plain" type="warning" />
        </view>
        <text class="p">时间：2025年01月01日-2025年01月01日</text>
        <text class="p">地点：内蒙古呼和浩特市新城区</text>
      </view>
    </view>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <u-top-tips ref="uTips"></u-top-tips>
    <toast></toast>
  </view>
</template>
<script>
export default {
  data() {
    return {
      scrollTop: 0,
      keyword: '',
      list: [1,1,1,1,1,1,1,1,1,1,1,1]
    }
  },
  onLoad() {},
  onShow() {},
  onPullDownRefresh() {},
  onShareAppMessage() {},
  methods: {
    /* 顶部提示文字 */
    uTips(title, type = 'warning', duration = 1500) {
      this.$refs.uTips.show({
        title: title,
        type: type,
        duration: duration,
      })
    },
    /* 返回顶部 */
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    },
  },
}
</script>
<style lang="scss" scoped>
page {
  background: #fff;
  padding-bottom: 120rpx;
}
.searchBox{
  background: #fff;
  padding: 15rpx;
}
.listMain{
  padding: 30rpx;
  .listItem{
    padding: 30rpx 20rpx;
    background: #fff;
    box-shadow: 0 0 10px #e5e5e5;
    margin-bottom: 30rpx;
    border-radius: 16rpx;
    .titleH3{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .h3{
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        width: calc(100% - 100px);
      }
    }
    >text{
      display: block;
      &.p{
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}
</style>
